<template>
    <div class="container">
        <Card>
            <p>缩放比例：{{zoom.toFixed(1)}}</p>
            <p>中心经度：{{center.lng.toFixed(4)}}</p>
            <p>中心纬度：{{center.lat.toFixed(4)}}</p>
        </Card>
        <Card>
            <p>当前点经度：{{currentPoint.lng}}</p>
            <p>当前点纬度：{{currentPoint.lat}}</p>
            <p v-if="location && location.formatted_address && location.addressComponent">
                当前位置：{{location.addressComponent.province}}{{location.formatted_address}}
            </p>
        </Card>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import request from '@/utils/request'
import config from '@/utils/config'
export default Vue.extend({
    props: {
        zoom: {type: Number},
        center: {type: Object},
        flag: {type: Number},
        currentPoint: {type: Object},
    },
    data() {
        return {
            loading: false,
            location: {},
        }
    },
    watch: {
        currentPoint() {
            this.selectReverse()
        }
    },
    mounted() {
      this.selectReverse()
    },
    methods: {
      /**
       * 逆地理编码查询
       * 根据经纬度查询位置
       */
      selectReverse() {
        if ( !config.tk) {
        console.error('未配置密钥')
        return
        }
        const params = {
          postStr: `{'lon':${this.currentPoint.lng},'lat':${this.currentPoint.lat},'ver':1}`,
          type: 'geocode',
          tk: config.tk,
        }
        this.loading = true
        this.location = {}
        // eslint-disable-next-line
        request.get('/geocoder', params).then((data: any) => {
          this.loading = false
          if (!data || !data.result) {
            return
          }
          this.location = data.result
        })
      },
    },
})
</script>
<style lang="scss" scoped>
.container {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 699;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    color: #ffffff;
    padding: 20px;
    .ivu-card {
        background: none;
        margin-left: 10px;
    }
}
</style>
